<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>自定义动画 | 拼命赶进度</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="gitbook/style.css">
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-ace/ace.css">
        
    
        
        <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
    

        
    
    
    <link rel="next" href="./布局.html" />
    
    
    <link rel="prev" href="./过渡动画.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="2.3.10"
        data-chapter-title="自定义动画"
        data-filepath="自定义动画.md"
        data-basepath="."
        data-revision="Sun Sep 03 2017 23:30:11 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="html.html">
            
                
                    <a href="./html.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML5
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="常用元素.html">
            
                
                    <a href="./常用元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        常用元素
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="图片音频视频.html">
            
                
                    <a href="./图片音频视频.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        图片音频视频
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="列表及表格.html">
            
                
                    <a href="./列表及表格.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        列表及表格
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="表单form元素.html">
            
                
                    <a href="./表单form元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        表单form元素
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="CSS.html">
            
                
                    <a href="./CSS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        CSS
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="如何引入CSS.html">
            
                
                    <a href="./如何引入CSS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        如何引入CSS
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="选择器.html">
            
                
                    <a href="./选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        选择器
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.2.1" data-path="通配选择符.html">
            
                
                    <a href="./通配选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.1.</b>
                        
                        通配选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.2" data-path="元素选择符.html">
            
                
                    <a href="./元素选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.2.</b>
                        
                        元素选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.3" data-path="id 及 class 选择符.html">
            
                
                    <a href="./id 及 class 选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.3.</b>
                        
                        id 及 class 选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.4" data-path="群组选择符.html">
            
                
                    <a href="./群组选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.4.</b>
                        
                        群组选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.5" data-path="关系选择符.html">
            
                
                    <a href="./关系选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.5.</b>
                        
                        关系选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.6" data-path="属性选择符.html">
            
                
                    <a href="./属性选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.6.</b>
                        
                        属性选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.7" data-path="伪类选择符.html">
            
                
                    <a href="./伪类选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.7.</b>
                        
                        伪类选择符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.8" data-path="伪对象选择符.html">
            
                
                    <a href="./伪对象选择符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.8.</b>
                        
                        伪对象选择符
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="CSS的常用样式.html">
            
                
                    <a href="./CSS的常用样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        CSS的常用样式
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="字体样式.html">
            
                
                    <a href="./字体样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.1.</b>
                        
                        字体样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="元素分类.html">
            
                
                    <a href="./元素分类.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.2.</b>
                        
                        元素样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="边框.html">
            
                
                    <a href="./边框.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.3.</b>
                        
                        边框样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="盒子模型.html">
            
                
                    <a href="./盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.4.</b>
                        
                        盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.5" data-path="段落样式.html">
            
                
                    <a href="./段落样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.5.</b>
                        
                        段落样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.6" data-path="背景样式.html">
            
                
                    <a href="./背景样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.6.</b>
                        
                        背景样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.7" data-path="列表样式.html">
            
                
                    <a href="./列表样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.7.</b>
                        
                        列表样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.8" data-path="变形样式.html">
            
                
                    <a href="./变形样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.8.</b>
                        
                        变形样式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.9" data-path="过渡动画.html">
            
                
                    <a href="./过渡动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.9.</b>
                        
                        过渡动画
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2.3.10" data-path="自定义动画.html">
            
                
                    <a href="./自定义动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.10.</b>
                        
                        自定义动画
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.11" data-path="布局.html">
            
                
                    <a href="./布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.11.</b>
                        
                        布局
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.12" data-path="视口.html">
            
                
                    <a href="./视口.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.12.</b>
                        
                        视口
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.13" data-path="CSS总结.html">
            
                
                    <a href="./CSS总结.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.13.</b>
                        
                        CSS总结
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" data-path="JavaScript.html">
            
                
                    <a href="./JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        JavaScript
                    </a>
            
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >拼命赶进度</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;">&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;</h1>
<h2 id="animationname&#x52A8;&#x753B;&#x540D;&#x79F0;">animation-name(&#x52A8;&#x753B;&#x540D;&#x79F0;)</h2>
<p>&#x5143;&#x7D20;&#x6240;&#x5E94;&#x7528;&#x7684;&#x52A8;&#x753B;&#x540D;&#x79F0;&#xFF0C;&#x5FC5;&#x987B;&#x4E0E;&#x89C4;&#x5219;<code>@keyframes</code>&#x914D;&#x5408;&#x4F7F;&#x7528;&#xFF0C;&#x56E0;&#x4E3A;&#x52A8;&#x753B;&#x540D;&#x79F0;&#x7531;<code>@keyframes</code>&#x5B9A;&#x4E49;<br><code>animation-name &#xFF1A;none | &lt;identifier&gt;</code>  </p>
<pre><code>div{
      -webkit-animation-name : FromLeftToRight;
      animation-name : FromLeftToRight;
}
</code></pre><h2 id="keyframes-&#x5173;&#x952E;&#x5E27;">keyframes (&#x5173;&#x952E;&#x5E27;)</h2>
<p>&#x88AB;&#x79F0;&#x4E3A;&#x5173;&#x952E;&#x5E27;&#xFF0C;&#x5176;&#x7C7B;&#x4F3C;&#x4E8E;Flash&#x4E2D;&#x7684;&#x5173;&#x952E;&#x5E27;&#x3002;&#x5728;CSS3&#x4E2D;&#x5176;&#x4E3B;&#x8981;&#x4EE5;&#x201C;@keyframes&#x201D;&#x5F00;&#x5934;&#xFF0C;&#x540E;&#x9762;&#x7D27;&#x8DDF;&#x7740;&#x662F;&#x52A8;&#x753B;&#x540D;&#x79F0;&#x52A0;&#x4E0A;&#x4E00;&#x5BF9;&#x82B1;&#x62EC;&#x53F7;&#x201C;{&#x2026;}&#x201D;&#xFF0C;&#x62EC;&#x53F7;&#x4E2D;&#x5C31;&#x662F;&#x4E00;&#x4E9B;&#x4E0D;&#x540C;&#x65F6;&#x95F4;&#x6BB5;&#x6837;&#x5F0F;&#x89C4;&#x5219;&#x3002;<br><code>@keyframes &lt;identifier&gt; {
    [ from | to | &lt;percentage&gt; ]{ sRules } ] [,*]
}</code></p>
<pre><code>@keyframes FromLeftToRight{
    0%{left: 0; }
     100%{ left: 800px; }
}
</code></pre><h2 id="animationduration&#x52A8;&#x753B;&#x65F6;&#x95F4;">animation-duration(&#x52A8;&#x753B;&#x65F6;&#x95F4;)</h2>
<p>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x7684;&#x6301;&#x7EED;&#x65F6;&#x95F4;<br><code>animation-duration&#xFF1A;&lt;time&gt;</code></p>
<pre><code>div{
      -webkit-animation-duration:1s;
                  animation-duration:1s
}
</code></pre><h2 id="animationtimingfunction&#x52A8;&#x753B;&#x7684;&#x8FC7;&#x6E21;&#x901F;&#x5EA6;">animation-timing-function(&#x52A8;&#x753B;&#x7684;&#x8FC7;&#x6E21;&#x901F;&#x5EA6;)</h2>
<p>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x7684;&#x8FC7;&#x6E21;&#x901F;&#x5EA6;&#x7C7B;&#x578B;<br><code>animation-timing-function&#xFF1A; ease | linear | ease-in | ease-out | ease-in-out</code></p>
<pre><code>div{
      -webkit-animation-timing-function : ease-in;
                    animation-timing-function : ease-in;
}
</code></pre><h2 id="animationdelay&#x52A8;&#x753B;&#x5EF6;&#x8FDF;&#x65F6;&#x95F4;">animation-delay(&#x52A8;&#x753B;&#x5EF6;&#x8FDF;&#x65F6;&#x95F4;)</h2>
<p><code>animation-delay&#xFF1A;&lt;time&gt;</code></p>
<h2 id="animationdirection&#x52A8;&#x753B;&#x7684;&#x987A;&#x5E8F;">animation-direction(&#x52A8;&#x753B;&#x7684;&#x987A;&#x5E8F;)</h2>
<p>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x5728;&#x5FAA;&#x73AF;&#x4E2D;&#x662F;&#x5426;&#x6309;&#x7167;&#x76F8;&#x53CD;&#x987A;&#x5E8F;&#x6267;&#x884C;
<code>animation-direction&#xFF1A;normal | reverse | alternate | alternate-reverse</code></p>
<blockquote>
<p>normal&#xFF1A;&#x6B63;&#x5E38;&#x65B9;&#x5411;<br>reverse&#xFF1A;&#x53CD;&#x65B9;&#x5411;&#x8FD0;&#x884C;<br>alternate&#xFF1A;&#x52A8;&#x753B;&#x5148;&#x6B63;&#x5E38;&#x8FD0;&#x884C;&#x518D;&#x53CD;&#x65B9;&#x5411;&#x8FD0;&#x884C;&#xFF0C;&#x5E76;&#x6301;&#x7EED;&#x4EA4;&#x66FF;&#x8FD0;&#x884C;<br>alternate-reverse&#xFF1A;&#x52A8;&#x753B;&#x5148;&#x53CD;&#x8FD0;&#x884C;&#x518D;&#x6B63;&#x65B9;&#x5411;&#x8FD0;&#x884C;&#xFF0C;&#x5E76;&#x6301;&#x7EED;&#x4EA4;&#x66FF;&#x8FD0;&#x884C;</p>
</blockquote>
<pre><code>div{
      -webkit-animation-direction : normal;
          animation-direction : normal;
}
</code></pre><h2 id="animationplaystate&#x52A8;&#x753B;&#x7684;&#x72B6;&#x6001;">animation-play-state(&#x52A8;&#x753B;&#x7684;&#x72B6;&#x6001;)</h2>
<p>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x7684;&#x72B6;&#x6001;<br><code>animation-play-state&#xFF1A;running | paused</code><br>running&#xFF1A;&#x8FD0;&#x52A8;<br>paused&#xFF1A;&#x6682;&#x505C;</p>
<pre><code>div:hover{    
    -webkit-animation-play-state:paused;    
    animation-play-state:paused;
}
</code></pre><h2 id="animationfillmode&#x52A8;&#x753B;&#x65F6;&#x95F4;&#x4E4B;&#x5916;&#x7684;&#x72B6;&#x6001;">animation-fill-mode(&#x52A8;&#x753B;&#x65F6;&#x95F4;&#x4E4B;&#x5916;&#x7684;&#x72B6;&#x6001;)</h2>
<p>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x65F6;&#x95F4;&#x4E4B;&#x5916;&#x7684;&#x72B6;&#x6001;
<code>animation-fill-mode &#xFF1A; none | forwards | backwards | both</code></p>
<blockquote>
<p>none&#xFF1A;&#x9ED8;&#x8BA4;&#x503C;&#x3002;&#x4E0D;&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x4E4B;&#x5916;&#x7684;&#x72B6;&#x6001;<br>forwards&#xFF1A;&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x72B6;&#x6001;&#x4E3A;&#x52A8;&#x753B;&#x7ED3;&#x675F;&#x65F6;&#x7684;&#x72B6;&#x6001;<br>backwards&#xFF1A;&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x72B6;&#x6001;&#x4E3A;&#x52A8;&#x753B;&#x5F00;&#x59CB;&#x65F6;&#x7684;&#x72B6;&#x6001;<br>both&#xFF1A;&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x72B6;&#x6001;&#x4E3A;&#x52A8;&#x753B;&#x7ED3;&#x675F;&#x6216;&#x5F00;&#x59CB;&#x7684;&#x72B6;&#x6001;</p>
</blockquote>
<pre><code>div {    
    -webkit-animation-fill-mode : both;    
                  animation-fill-mode : both;
}
</code></pre><h2 id="animation&#x52A8;&#x753B;&#x590D;&#x5408;&#x5C5E;&#x6027;">animation(&#x52A8;&#x753B;&#x590D;&#x5408;&#x5C5E;&#x6027;)</h2>
<p>&#x901A;&#x8FC7; animation &#xFF0C;&#x6211;&#x4EEC;&#x80FD;&#x591F;&#x521B;&#x5EFA;&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;&#xFF0C;&#x8FD9;&#x53EF;&#x4EE5;&#x5728;&#x8BB8;&#x591A;&#x7F51;&#x9875;&#x4E2D;&#x53D6;&#x4EE3;&#x52A8;&#x753B;&#x56FE;&#x7247;gif&#x3001;Flash &#x52A8;&#x753B;&#x4EE5;&#x53CA; JavaScript&#x3002;
<code>animation&#xFF1A;[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || &lt;single-animation-fill-mode&gt; || &lt;single-animation-play-state&gt; [ ,*]</code></p>
<pre><code>div{
    -webkit-animation: FromLeftToRight  2s ease-out forwards;
                 animation: FromLeftToRight  2s ease-out forwards;     
}
</code></pre><h2 id="webkitfilter&#x6EE4;&#x955C;">-webkit-filter(&#x6EE4;&#x955C;)</h2>
<p>&#x901A;&#x8FC7; -webkit-filter &#xFF0C;&#x6211;&#x4EEC;&#x80FD;&#x591F;&#x521B;&#x5EFA;&#x5404;&#x79CD;&#x5404;&#x6837;&#x7684;&#x56FE;&#x7247;&#x6548;&#x679C;&#x3002;<br>grayscale &#x7070;&#x5EA6;               &#x503C;&#x4E3A;0-1&#x4E4B;&#x95F4;&#x7684;&#x5C0F;&#x6570;<br>sepia &#x8910;&#x8272;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;   &#x503C;&#x4E3A;0-1&#x4E4B;&#x95F4;&#x7684;&#x5C0F;&#x6570;<br>saturate &#x9971;&#x548C;&#x5EA6;&#x3000;&#x3000;&#x3000;&#x3000; &#x503C;&#x4E3A;num<br>hue-rotate &#x8272;&#x76F8;&#x65CB;&#x8F6C;&#x3000;&#x3000;&#x503C;&#x4E3A;angle<br>invert &#x53CD;&#x8272;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;  &#x503C;&#x4E3A;0-1&#x4E4B;&#x95F4;&#x7684;&#x5C0F;&#x6570;<br>opacity &#x900F;&#x660E;&#x5EA6;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x503C;&#x4E3A;0-1&#x4E4B;&#x95F4;&#x7684;&#x5C0F;&#x6570;<br>brightness &#x4EAE;&#x5EA6;&#x3000;&#x3000;&#x3000;&#x3000; &#x503C;&#x4E3A;0-1&#x4E4B;&#x95F4;&#x7684;&#x5C0F;&#x6570;<br>contrast &#x5BF9;&#x6BD4;&#x5EA6;&#x3000;&#x3000;&#x3000;&#x3000; &#x503C;&#x4E3A;num<br>blur &#x6A21;&#x7CCA;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;     &#x503C;&#x4E3A;length<br>drop-shadow &#x9634;&#x5F71;<br><code>-webkit-filter: blur(2px);</code></p>
<pre><code>div{
      -webkit-filter:blur(3px) ;//&#x6A21;&#x7CCA;
}
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./过渡动画.html" class="navigation navigation-prev " aria-label="Previous page: 过渡动画"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./布局.html" class="navigation navigation-next " aria-label="Next page: 布局"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-ace/ace/ace.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-ace/ace.js"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"expandable-chapters":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"ace":{},"mdinhtml":{},"highlight":{},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
